<template>
    <div>
        <!-- > vjs-fluid 样式是视频窗口随着浏览器拖拽大小变化而自动变化 <!-->
        <video ref="videoPlayer" class="video-js "></video>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';  
  
export default defineComponent({  
  name: 'player', // 在这里定义组件的 name  
  // 你可以在这里定义其他选项，如 props、emits 等  
});  
</script>  

<!-- setup（）中不能使用this -->
<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
import { useRoute } from 'vue-router';
import config from "@/config";

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
const route = useRoute();

var videoPlayer = ref(null);
var myPlayer = ref(null);

console.log("setup init");

const videoOptions = {
    autoplay: false,
    controls: true,
    sources: [
        {
            src: config.BASE_URL + "/video/byte-range?path=" + encodeURIComponent(route.query.path),
            type: "video/mp4"
        }
    ]
}

onMounted(() => {
    console.log("player mounted");
    myPlayer.value = videojs(videoPlayer.value, videoOptions, function onPlayerReady() {
        console.log('onPlayerReady', this);
    })
})

onUnmounted(() => {
    console.log("play unmounted");
    if (myPlayer.value) {
        myPlayer.value.dispose();
    }
})
</script>